<script setup>
import { ref, reactive, onMounted } from "vue";
import mangocrud from "@/components/magnxo_crud/index.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import AutoNavi from "@/components/AutoNavi/index.vue";
import msggage from "@/utils/ActionMessage.js";
import {
  AutoNavilist,
  AutoNavoperate,
  AutoNavdelete,
  AutoNaveditoperate,
} from "@/api/index.js";
onMounted(() => {
  getlist();
});
const getlist = () => {
  let params = {
    pageNum: listConfig.pagination.page,
    pageSize: listConfig.pagination.limit,
  };
  AutoNavilist(params).then((res) => {
    console.log(res);
    let list = res.data.list;
    tableData.value = list;
    listConfig.pagination.totalKey = res.data.page.total;
  });
};
let temporary = reactive(null);
let keyword = ref("");
let isedit = ref(false);
let editid = ref("");
let tableData = ref([]);
let mangoref = ref(null);
let dialogVisible = ref(false);
let AutoNaviref = ref(null);
let modelRef = reactive({
  lng: 39.909135,
  lat: 116.397417,
});
const handleClick = () => {
  isedit.value = false;
  dialogVisible.value = true;
  setTimeout(() => {
    modelRef.lng = 39.909135;
    modelRef.lat = 116.397417;
    keyword.value = "北京天安门";
    AutoNaviref.value.init();
  }, 0);
};
const handlerail = () => {
  AutoNaviref.value.handlerail();
};
const handleDetails = (scope) => {
  editid.value = scope.scope.row._id;
  isedit.value = true;
  let temporary = scope.scope.row.temporary;
  let path = [];
  temporary.map((item) => {
    path.push([item.lng, item.lat]);
  });
  let position = scope.scope.row.postionmodel;
  let address = scope.scope.row.address;
  keyword.value = address;
  modelRef.lng = position[0];
  modelRef.lat = position[1];
  dialogVisible.value = true;
  setTimeout(() => {
    AutoNaviref.value.init().then(() => {
      AutoNaviref.value.editRectangle(path);
    });
  }, 0);
};
const paginationchange = (page) => {
  listConfig.pagination.limit = page["limit"];
  listConfig.pagination.page = page["page"];
  getlist();
};
const deleteFn = (command, position, selection, data) => {
  if (data && data.length == 1) {
    debugger;
    let params = {
      ids: data[0]._id,
    };
    AutoNavdelete(params).then((res) => {
      if (res.code === 200) {
        msggage.success("删除成功");
        getlist();
      }
    });
  } else {
    msggage.error("请选择一条数据");
  }
  console.log(command, position, selection, data);
};
const handlsubmit = () => {
  let params = {
    address: keyword.value,
    postionmodel: [modelRef.lng, modelRef.lat],
    temporary,
    _id: editid.value,
  };
  if (isedit.value) {
    AutoNaveditoperate(params).then((res) => {
      if (res.code == 200) {
        msggage.success("操作成功");
        dialogVisible.value = false;
        getlist();
      } else {
        msggage.error(res.msg);
      }
    });
  } else {
    params._id = null;
    AutoNavoperate(params).then((res) => {
      if (res.code == 200) {
        msggage.success("操作成功");
        dialogVisible.value = false;
        getlist();
      } else {
        msggage.error(res.msg);
      }
    });
  }
};
const setKeyword = (value) => {
  keyword.value = value;
};
const settemporary = (value) => {
  console.log(value);
  temporary = value;
};
const handleAction = (command, position, selection, data) => {
  console.log(command, position, selection, data);
  switch (command) {
    case "add": // 查询
      handleClick();
      break;
    case "delete": //重置
      deleteFn(command, position, selection, data);
      break;
    default:
      break;
  }
};
/**
 * searchForm搜索框 可以插槽
 * operatebtn表格操作
 * columns表格数据项 可以定义插槽
 */
const list = {
  showselection: true,
  showindex: true,
  searchForm: {
    toolbars: [{ key: "search" }, { key: "reset", label: "重置" }],
    forms: [
      { prop: "userName", label: "姓名" },
      { prop: "userEmail", label: "邮箱" },
    ],
  },
  operatebtn: [
    { key: "add", label: "添加", type: "primary" },
    { key: "delete", label: "删除", type: "danger" },
  ],
  columns: [
  { label: "位置名称", property: "address" },
    { label: "操作", slotName: "tool" },
  ],
  pagination: {
    limit: 10,
    page: 1,
    totalKey: 0,
  },
};

let listConfig = reactive(list);
</script>
<template>
  <div class="gaode">
    <mangocrud
      ref="mangoref"
      :tableData="tableData"
      :listConfig="listConfig"
      @handleAction="handleAction"
      @pagination-change="paginationchange"
    >
      <template #tool="scope">
        <el-button @click="handleDetails(scope)">编辑</el-button>
      </template>
    </mangocrud>
    <el-dialog
      title="地理位置"
      v-model="dialogVisible"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-button @click="handlerail">设置围栏</el-button>
      <el-button @click="handlsubmit">保存围栏</el-button>
      <AutoNavi
        ref="AutoNaviref"
        :temporary="temporary"
        @settemporary="settemporary"
        @setKeyword="setKeyword"
        :keyword="keyword"
        :modelRef="modelRef"
      ></AutoNavi>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.gaode {
  .el-dialog {
    width: 54%;
  }
  .el-dialog__body {
    height: 50vh;
  }
}
</style>
